<template>
  <div class="search-anime-main">
    <div class="anime-list">
      <Card3D :data="item" v-for="item in searchStore.data.list" :key="item.id" />
    </div>
  </div>
</template>

<script>
import Card3D from '@comps/Block/Card3D.vue'

import { useSearchStore } from '@/stores/search'

export default {
  name: 'SearchAnimeBox',
  components: {
    Card3D
  },
  setup() {
    const searchStore = useSearchStore()

    return {
      searchStore
    }
  }
}
</script>

<style lang="scss" scoped>
.search-anime-main {
  margin-bottom: 80px;
  overflow-x: hidden;
}
.anime-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0 0 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
